<template>
  <div class="wrapper">
    <template v-if="list.length > 0">
      <div class="item" v-for="item of list" :key="item.id">
        <div class="circle-wrapper" @click="changeAddress(item)">
          <div class="circle">
            <div class="inner" v-if="$store.state.currentAddress.id == item.id"></div>
          </div>
        </div>
        <div class="name">
          <p>{{ item.name }} {{ item.mobile }}</p>
          <p>
            <span v-if="item.is_default == 0">默认</span>
            {{ item.province }} {{ item.city }} {{ item.district }} {{ item.address }}
          </p>
        </div>
        <router-link :to="'/addressDetail/' + item.id" tag="div" class="edit">
          <span>编辑</span>
        </router-link>
      </div>
    </template>
    <div v-else>
      <p style="text-align: center;">暂无收货地址，请添加</p>
    </div>
    <div>
      <router-link to="/addressDetail/none" tag="button" class="add">添加</router-link>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'AddressList',
    created() {
      this._getList()
    },
    data() {
      return {
        list: [],
        address: {},
        t: null
      }
    },
    computed: {
      ...mapState(['openId'])
    },
    methods: {
      async _getList() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/address/list',
          method: 'POST',
          data: {
            size: 1000,
            current: 1,
            openid: this.openId
          }
        })
        if(code === 0) {
          this.list = data.items
          if(!this.$store.state.currentAddress.id) {
            let defaultAddress = this.list.filter(item => {
              return item.is_default == '0'
            })[0]
            if(defaultAddress) {
              this.$store.commit('switchAddress', defaultAddress)
            }
          }
        }
      },
      changeAddress(data) {
        this.$store.commit('switchAddress', data)
        clearTimeout(this.t)
        this.t = setTimeout(() => {
          this.$router.go(-1)
        }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .wrapper {
    min-height:100vh;
    padding-top: 0.2rem;
    background: #eee;
  }
  .item {
    padding: 0.1rem;
    display: flex;
    align-items: center;
    background: #fff;
    .circle-wrapper {
      flex: 0 0 0.8rem;
      width: 0.8rem;
      text-align: center;
      .circle {
        display: inline-block;
        position: relative;
        width: 0.4rem;
        height: 0.4rem;
        border: 1px solid $colorGray;
        border-radius: 50%;
        .inner {
          position: absolute;
          width: 0.3rem;
          height: 0.3rem;
          border-radius: 50%;
          @include center;
          background: $colorRed;
        }
      }
    }
    .name {
      flex: 1;
      span {
        display: inline-block;
        padding:0 0.04rem;
        background: $colorRed;
        color: #fff;
        border-radius: 5px;
        font-size: 0.2rem;
      }
    }
    .edit {
      flex: 0 0 0.5rem;
    }
  }
  .add {
    display: block;
    margin: 0.4rem auto;
    width: 80%;
    padding: 0.2rem;
    border: none;
    border-radius: 5px;
    background: $colorRed;
    color: #fff;
    font-size: 0.28rem;
  }
</style>
